
<template>
  <div :class="textAlign" :ref="btnRef">
    <el-tooltip
      placement="top"
      effect="light"
      v-for="(item, index) in buttonData"
      :key="index"
      :content="item.tipMsg"
      :disabled="disabledTip === true ? true : item.tipMsg ? false : true"
    >
      <el-button
        class="boutton-class"
        :ref="`${btnRef}_${item.action}`"
        :loading="loading"
        :plain="plain"
        :round="round"
        :size="size"
        :disabled="item.disabled"
        :icon="item.icon || icon"
        :type="item.type || type"
        @click="handleClick(item)"
        v-if="item.isVisiable !== false"
      >
        <span v-if="item.name">{{ item.name }}</span>
      </el-button>
    </el-tooltip>
    <slot name="customSlot"></slot>
  </div>
</template>

<script>
import { getButtonData } from "@/components/api/button.js";
export default {
  name: "vueBtn",
  props: {
    //自定义按钮ref
    btnRef: {
      type: String,
      default() {
        return "buttonRefs";
      },
    },
    // 当前按钮类型primary / success / warning / danger / info / text
    type: {
      type: String,
      default() {
        return "primary";
      },
    },
    // 是否朴素按钮
    plain: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 是否圆角按钮
    round: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 图标类名
    icon: {
      type: String,
      default() {
        return "";
      },
    },
    // 是否加载中状态
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 当前组件大小/medium/small/mini
    size: {
      type: String,
      default() {
        return "medium";
      },
    },
    // 按钮排列位置
    textAlign: {
      type: String,
      default() {
        return "textLeft";
      },
    },
    // 是否自定义数据
    isCustomData: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 当前组件自定义数据
    customData: {
      type: Array,
      default() {
        return [];
      },
    },
    disabledTip: {
      type: Boolean,
      default() {
        return true;
      },
    },
    which: {
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  computed:{
    // a(){}
  },
  data() {
    return {
      buttonData: [],
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      if (this.isCustomData) {
        this.initButtonData(this.customData);
      } else {
        let params = {};
        getButtonData(params)
          .then((res) => {
            this.initButtonData(res.data);
          })
          .catch((err) => {
            console.log("请求失败：" + err.status + "," + err.statusText);
          });
      }
    },
    initButtonData(data) {
      this.buttonData = data && data.length > 0 ? data : [];
    },
    handleClick(btnItem) {
      this.$emit("buttonCallback", this.which, btnItem);
    },
    //按钮隐藏与显示
    showOrHideBtn(isVisiable, action) {
      this.buttonData.forEach((item) => {
        if (!action || action.indexOf(item.action) > -1) {
          item.isVisiable = isVisiable;
        }
      });
    },
    //禁用/启用按钮 true:启用；false：禁用
    disableOrEnableBtn(disabled, action) {
      this.buttonData.forEach((item,index,array) => {
        if (!action || action.indexOf(item.action) > -1) {
          item.disabled = disabled;
          this.$set(array,index,item)
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>

